<template>
    <transition name='search-wrap'>
        <div class="wrap">
            <div class="top">
                <div class="search">
                    <i class="iconfont icon-zuojiantou"
                       @click='back'></i>
                    <div class="search-box">
                        <input type="text"
                               placeholder="搜索音乐、歌手、歌词、用户"
                               v-model="search"
                               @focus='searchFocus'
                               @blur='searchStatus = false'
                               v-focus>
                        <i class="iconfont icon-iconfontcha"
                           v-if="search"
                           @click='deleteKeyword'></i>
                    </div>
                </div>
                <div class="search-classify">
                    <span>单曲</span>
                    <span>歌手</span>
                    <span>专辑</span>
                    <span>歌单</span>
                    <span>MV</span>
                    <span>主播电台</span>
                    <span>用户</span>
                </div>
                <transition name='suggest'>
                    <div class="suggest-wrap"
                         v-if="searchStatus">
                        <div class="suggest-item keyword"
                             @click='search(search)'>
                            搜索“{{search}}”
                        </div>
                        <div class="suggest-item"
                             v-for="item in suggest"
                             @click='searchMusic(item)'><i class="iconfont icon-sousuo"></i>{{item.name}}</div>
                    </div>
                </transition>
            </div>
            <div class="result-list">
                <!--<swiper :options="swiperOption"
                                    ref="mySwiper"
                                    class="main-wrap">-->
                <!-- slides -->
                <!--<swiper-slide>-->
                <div class="search-list">
                    <div class="search-item"
                         v-for="item in searchList">
                        <div class="search-info"
                             @click='play(item)'>
                            <div class="name">{{item.name}}</div>
                            <div class="singer">{{item.artists | singerName}} - {{item.album.name}}</div>
                        </div>
                        <i class="iconfont icon-sandiancaidan"></i>
                    </div>
                </div>
                <!--</swiper-slide>
                                <swiper-slide>I'm Slide 2</swiper-slide>
                                <swiper-slide>I'm Slide 3</swiper-slide>
                                <swiper-slide>I'm Slide 4</swiper-slide>
                            </swiper>-->
            </div>
        </div>
    </transition>
</template>
<script type="text/ecmascript-6">
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    data() {
        return {
            swiperOption: {
                // autoHeight:true,
                // NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
                // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // swiper configs 所有的配置同swiper官方api配置
                // if you need use plugins in the swiper, you can config in here like this
                // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                debugger: true,
                // swiper callbacks
                // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
                onTransitionStart(swiper) {
                    // console.log(swiper)
                },
                onSlideChangeEnd(swiper) {
                    _this.transformX = swiper.realIndex;
                }
            },
            search: '',
            searchStatus: false,
            suggest: '',
            searchList: []
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    watch: {
        search() {
            this.suggest = '';
            if (this.search != '') {
                this.getSuggest();
                this.searchStatus = true;
            } else {
                this.searchStatus = false;
            }
        }
    },
    methods: {
        searchFocus() {
            if (this.search != '') {
                this.searchStatus = true;
            }
        },
        getSuggest: _.debounce(function () {
            this.$http.get('http://localhost:3000/search/suggest?keywords=' + this.search)
                .then(response => {
                    console.log(response)
                    if (response.body.code === 200) {
                        this.suggest = response.body.result.artists;
                    }
                })
        }, 1000),
        deleteKeyword() {
            this.search = '';
        },
        searchMusic(item) {
            this.$http.get('http://localhost:3000/search?keywords=' + item.name)
                .then(response => {
                    console.log(response)
                    this.searchList = response.body.result.songs;
                })
        },
        back() {
            this.$emit('closeSearch');
        },
        play(m) {
            var music = {
                mid:m.id,
                name: m.name,
                artists: m.artists,
                ablumName: m.album.name,
                ablumPic: m.album.picUrl,
                musicUrl: m.mp3Url
            }
            this.$store.commit('addsong', music);
            this.$store.commit('play');
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    filters: {
        singerName(value) {
            if (value.length > 1) {
                var arr = [];
                value.forEach(function (e) {
                    arr.push(e.name);
                });
                return arr = arr.join('/');
            } else {
                return value[0].name;
            }
        }
    },
    directives:{
        focus:{
            inserted(el){
                el.focus();
            }
        }
    }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped >
@import '../../../static/base/public.scss';
@import url('../../../static/css/iconfont.css');
.search-wrap-enter{
    opacity: 0;
    transform: translateY(1.4rem);
}
.search-wrap-enter-active{
    transition: all .4s;
}
.search-wrap-leave-active{
    transition: all .4s;
    transform: translateY(1.4rem);
    opacity: 0;
}


.suggest-enter {
    opacity: 0;
    transform: scale(0.8);
}

.suggest-enter-active {
    transition: all .4s;
}

.wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: #f2f4f5;
    display: flex;
    flex-direction: column;
    .top {
        flex: none;
        .search {
            display: flex;
            box-sizing: border-box;
            height: 1.4rem;
            padding: 0 rem(16) 0 0;
            background: $baseColor;
            .iconfont {
                width: rem(116);
                color: #ffffff;
                text-align: center;
                align-self: center;
            }
            .search-box {
                flex: auto;
                display: flex;
                border-bottom: 1px solid rgba(255, 255, 255, .6);
                margin-bottom: rem(16);
                input {
                    flex: auto;
                    background: transparent;
                    border: none;
                    outline: none;
                    color: #ffffff;
                    &::-webkit-input-placeholder {
                        color: rgba(255, 255, 255, .6);
                    }
                }
            }
        }
        .search-classify {
            height: .8rem;
            display: flex;
            align-items: center;
            background: #ffffff;
            span {
                flex: auto;
                text-align: center;
            }
        }
        .suggest-wrap {
            position: absolute;
            z-index: 200;
            width: 90%;
            top: 1.4rem;
            right: rem(20);
            box-shadow: 0 6px 40px 12px rgba(0, 0, 0, 0.2);
            .suggest-item {
                height: rem(100);
                background: #f3f3f3;
                border-bottom: 1px solid #dbdbdb;
                display: flex;
                align-items: center;
                color: #7a7a7a;
                .iconfont {
                    color: #bbbdbf;
                    width: rem(82);
                    flex: none;
                    text-align: center;
                }
            }
            .keyword {
                color: #507daf;
                padding-left: rem(30);
                @extend %text-overflow;
            }
        }
    }
    .result-list {
        flex: auto;
        display: flex;
        flex-direction: column; // .main-wrap {
        //     flex: 1;
        .search-list {
            padding-left: rem(12.5);
            overflow: auto;
            .search-item {
                height: rem(116);
                display: flex;
                align-items: center;
                border-bottom: 1px solid #dadcdd;
                .search-info {
                    flex: 1;
                    color: #000000;
                    align-self: stretch;
                    .name {
                        color: #303131;
                        padding-top: rem(25);
                        margin-bottom: rem(18);
                    }
                }
                .iconfont {
                    color: #aaabac;
                    width: rem(100);
                    text-align: center;
                }
            }
        } // }
    }
}

[data-dpr='1'] .icon-zuojiantou {
    font-size: 24px;
}

[data-dpr='2'] .icon-zuojiantou {
    font-size: 48px;
}

[data-dpr='3'] .icon-zuojiantou {
    font-size: 72px;
}

[data-dpr='1'] .icon-iconfontcha {
    font-size: 20px;
}

[data-dpr='2'] .icon-iconfontcha {
    font-size: 40px;
}

[data-dpr='3'] .icon-iconfontcha {
    font-size: 60px;
}

[data-dpr='1'] .icon-sandiancaidan {
    font-size: 14px;
}

[data-dpr='2'] .icon-sandiancaidan {
    font-size: 28px;
}

[data-dpr='3'] .icon-sandiancaidan {
    font-size: 42px;
}

// 搜索音乐名称
[data-dpr='1'] .search-info .name {
    font-size: 15px;
}

[data-dpr='2'] .search-info .name {
    font-size: 30px;
}

[data-dpr='3'] .search-info .name {
    font-size: 45px;
}




[data-dpr='1'] .search-box input {
    font-size: 16px;
}

[data-dpr='2'] .search-box input {
    font-size: 32px;
}

[data-dpr='3'] .search-box input {
    font-size: 48px;
}


[data-dpr='1'] .suggest-item {
    font-size: 15px;
}

[data-dpr='2'] .suggest-item {
    font-size: 30px;
}

[data-dpr='3'] .suggest-item {
    font-size: 45px;
}
</style>
